// 添加和编辑 消息推送  原型-属于业务管理模块
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message,Spin,Cascader,Radio} from 'antd'
import { connect } from 'react-redux'
/* 引用接口文档路径 */
import {
  searchSelectQuery,addMessagePush,editMessagePush,addSendMessage,editSendMessage
} from 'actions/business'
const Search = Input.Search;
const FormItem = Form.Item

@Form.create({
    mapPropsToFields(props) {
      return {
        title: Form.createFormField({
          ...props.content,
          value: props.content.title,
        }),
        userType: Form.createFormField({
          ...props.content,
          value: props.content.userType,
        }),
        sendType: Form.createFormField({
          ...props.content,
          value:props.content.pushType
        }),
      };
    } 
})

@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)

export default class ModalAddMessagePush extends Component {
    constructor (props) {
      super(props)
      this.state = {
        editPublisherId:"",
        dataTypeList:[],//用户对象数据
        redirectTypeList:[],//指向数据
        redirectTypeListNum:'',
        typeList:[],//类型数据
        typeListNum:'',
        reportTypeList:[],//报告类型
        reportTypeNum:"",//报告类型
        sendType:'',//推送方式  
        searchList:[],//关键字搜索的结果
        chooseSearch:"",//选择的关键字
        url:"",//选择超链接所输入的URL
        accountId:'',//运营推送 用户ID
        isEidtSearch:"",
      }
    }

    componentDidMount() {//组件第一次渲染
      console.log(this.props.content)
      this.setState({
        redirectTypeListNum:this.props.content.redirectType,
      },()=>{
        this.chooseGoType(this.props.content.redirectType)
        this.setState({
          typeListNum:this.props.content.type,
        },()=>{
          this.chooseType(this.props.content.type)
          this.setState({
            reportTypeNum:this.props.content.reportType
          })
        })
      })
      /*
        搜索列表数据反查
      */
      setTimeout(()=>{
        if(this.props.content.contentId){
          var arryList = [];
          var list = {
            id:this.props.content.contentId,
            title:this.props.content.contentTitle
          }
          arryList.push(list)
          this.setState({
            searchList:arryList
          },()=>{
            this.setState({
              chooseSearch:this.props.content.contentId,
            })
          })
        }else{
          this.setState({
            chooseSearch:'',
          })
        }
      },300)
      
      
      this.setState({
          dataTypeList:this.props.baseData.accountTypeList,
          redirectTypeList:this.props.baseData.redirectTypeList,
          /*
            编辑数据-赋值
          */
          url:this.props.content.url,
          sendType:this.props.content.pushType,
          accountId:this.props.content.accountId
      })
    }
    componentWillReceiveProps(){//在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

    }
    chooseGoType(value){//选择跳转类型
      this.setState({
        redirectTypeListNum:value,
        typeListNum:'',
        typeList:[],
        searchList:[],
        chooseSearch:''
      });

      for(var i = 0; i < this.state.redirectTypeList.length ;i ++){
        if(this.state.redirectTypeList[i].redirectType == value){ 
          //赋值
          this.setState({
            typeList:this.state.redirectTypeList[i].childList
          })
        }
      } 
    }
    chooseType(value){//选择所属类型
      this.setState({
        typeListNum:value,
        reportTypeNum:'',
        searchList:[],
        chooseSearch:''
      });
      for(var i = 0; i < this.state.typeList.length ;i ++){
        if(this.state.typeList[i].name == '报告'){ 
          //赋值
          this.setState({
            reportTypeList:this.state.typeList[i].childReportTypes
          })
        }
      }
    }
    chooseReportType(value){//选择报告类型
      this.setState({
        reportTypeNum:value,
        searchList:[],
        chooseSearch:''
      })
    }
    searchSelect(value){//根据输入查询列表数据
      console.log(value);
      if(!this.state.typeListNum){
        message.error('请选择类型')
        return;
      }
      /*
        检索用到的一级菜单的type不是 select中的唯一标示,需要循环反查contentType
        赋值给 type
      */
      var type ='';
      for(var i = 0; i < this.state.typeList.length ;i ++){
        if(this.state.typeList[i].type == this.state.typeListNum){ 
          //赋值
          type = this.state.typeList[i].contentType
        }
      }
      /*
        判断一级菜单选择的是否是报告，如果是报告，type的取值改为报告childList内选择的字段
      */
      if(this.state.typeListNum == 1 && !this.state.reportTypeNum){
        //类型为报告
        message.error('报告类型')
        return;
      }
      if(this.state.typeListNum == 1 && this.state.reportTypeNum){
        //类型为报告
        type = this.state.reportTypeNum;
      }

      var data ={
        title:value,
        type:type,
      }

      this.props.dispatch(searchSelectQuery(
      data,
      (respose) => {
          this.setState({
            searchList:respose.respData
          })            
      }))
    }

    chooseSendType(value){//选择推送类型
      this.setState({
        sendType:value.target.value
      })
    }
    chooseSearchSelect(value){//选择所搜索的结果
      this.setState({
        chooseSearch:value
      })
    }
    ulrChange(value){//输入超链接
      this.setState({
        url:value.target.value
      })
    }
    accountIdChange(value){
      this.setState({
        accountId:value.target.value
      })
    }

    addReportSubmit(sendType,callback,e){//新增和编辑保存按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                if(!this.state.redirectTypeListNum){
                  message.error('请选择跳转类型');
                  return;
                }
                if(!this.state.typeListNum){
                  message.error('请选择数据类型');
                  return;
                }
                if(this.state.typeListNum == 1 && !this.state.reportTypeNum){
                  message.error('请选择报告类型');
                  return;
                }
                if(this.state.redirectTypeListNum != 3 && !this.state.chooseSearch){
                  message.error('请选择推送内容');
                  return;
                }
                if(this.state.redirectTypeListNum == 3 && !this.state.url){
                  message.error('请输入超链接地址');
                  return;
                }
                if(this.state.sendType != 1 && !values.userType){
                  message.error('请选择用户对象');
                  return;
                }
                if(this.state.sendType == 1 && !this.state.accountId){
                  message.error('请输入正确的用户ID');
                  return;
                }
                if(this.state.sendType == 1 && /\D/g.test(this.state.accountId)){
                  message.error('请输入正确的用户ID');
                  return;
                }
                
                if(sendType == 1 || sendType == 3){//新增
                  var data = {
                      "title":values.title,//标题
                      "userType":values.userType ||'',//用户对象
                      "redirectType":this.state.redirectTypeListNum,//指向分类
                      "type":this.state.typeListNum || '',//一级分类
                      'reportType':this.state.reportTypeNum || '',//二级分类
                      "contentId":this.state.chooseSearch || '',//内容ID
                      'accountId':this.state.accountId || '',//运营测试ID
                      'pushType':this.state.sendType,//
                      "url":this.state.url || '',//超链接URL
                  }
                  //调用新增和推送
                  if(sendType == 1){
                    this.props.dispatch(addMessagePush(
                      data,
                      (respose) => {
                          callback&&callback()
                          message.success(respose.respMsg);
                          this.props.ModalCancel();
                      })
                    )
                  }else if(sendType == 3){
                    this.props.dispatch(addSendMessage(
                      data,
                      (respose) => {
                          callback&&callback()
                          message.success(respose.respMsg);
                          this.props.ModalCancel();
                      })
                    )
                  } 
                }else if(sendType == 2 || sendType == 4){//编辑
                    var data = {
                      'id':this.props.content.id,//
                      "title":values.title,//标题
                      "userType":values.userType ||'',//用户对象
                      "redirectType":this.state.redirectTypeListNum,//指向分类
                      "type":this.state.typeListNum || '',//一级分类
                      'reportType':this.state.reportTypeNum || '',//二级分类
                      "contentId":this.state.chooseSearch || '',//内容ID
                      'accountId':this.state.accountId || '',//运营测试ID
                      'pushType':this.state.sendType,//
                      "url":this.state.url || '',//超链接URL
                    }
                    //调用编辑和推送
                    if(sendType == 2){
                      this.props.dispatch(editMessagePush(
                        data,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg);
                            this.props.ModalCancel();
                        })
                      )
                    }else if(sendType == 4){
                      this.props.dispatch(editSendMessage(
                        data,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg);
                            this.props.ModalCancel();
                        })
                      )
                    } 
                }
            }
        });       
    }
    
    render () {
        const { getFieldDecorator } = this.props.form;
        const content = this.props.content;        
        const RadioGroup = Radio.Group;
        const formItemLayout = {
          labelCol: {sm: { span: 3 },},
          wrapperCol: {sm: { span: 20 },},
        };
        return (
            <Modal
                width={"800px"}
                wrapClassName="vertical-center-modal"
                maskClosable={false}
                destroyOnClose={true}
                visible={this.props.ModalFlg}
                title={this.props.type == '1' ? "新增推送" : "编辑推送" }
                onCancel={this.props.ModalCancel}
                onOk={this.addReportSubmit.bind(this,this.props.callback)}
                footer={
                  [
                    <Button key="ok" type="primary"  onClick={this.addReportSubmit.bind(this,this.props.type,this.props.callback)}>保存</Button>,
                    <Button key="cancel" type="primary"  onClick={this.addReportSubmit.bind(this,(this.props.type==1?3:4),this.props.callback)}>立即推送</Button>
                  ]
                }
            >
            <div>
              <Form>
                <FormItem label="标题" {...formItemLayout}>
                  {
                    getFieldDecorator('title', {
                    rules: [{
                        required: true,message:"请输入关键字"
                      }],
                    })(
                      <Input placeholder="请输入关键字"  size="default" style={{ width: '200px' }} />
                    )
                  }
                </FormItem>
                <FormItem label="用户对象" {...formItemLayout}>
                  {
                    getFieldDecorator('userType', {
                    rules: [{
                        required: false,message:"请选择用户类型"
                      }],
                    })(
                      <Select placeholder="请选择用户类型"  style={{ width: 200 }} >
                        {
                          this.state.dataTypeList.map((item,i)=> {
                            return(
                              <Select.Option value={item.value} key={i}>{item.name}</Select.Option>
                            )
                          })
                        }
                      </Select> 
                    )
                  }             
                </FormItem>
                <FormItem label="指向" {...formItemLayout}>
                  <Select placeholder="请选择跳转类型" value={this.state.redirectTypeListNum} onSelect={this.chooseGoType.bind(this)} style={{ width: 200,marginRight:'15px' }} >
                    {
                      this.state.redirectTypeList.map((item,i)=> {
                        return(
                          <Select.Option value={item.redirectType} key={i}>{item.name}</Select.Option>
                        )
                      })
                    }
                  </Select> 
                  { 
                    //内部跳转和H5跳转所需的选择框
                    // (this.state.redirectTypeListNum == 1 || this.state.redirectTypeListNum == 2) ?
                    <Select placeholder="请选择类型" value={this.state.typeListNum}    onSelect={this.chooseType.bind(this)} style={{ width: 200,marginRight:'15px' }} >
                      {
                        this.state.typeList.map((item,i)=> {
                          return(
                            <Select.Option value={item.type} key={i}>{item.name}</Select.Option>
                          )
                        })
                      }
                    </Select>
                  }
                  {
                    //内部跳转中-报告-三级选择框
                    (this.state.redirectTypeListNum == 1 && this.state.typeListNum == 1) ?
                    <Select placeholder="请选择报告类型" value={this.state.reportTypeNum} onSelect={this.chooseReportType.bind(this)}   style={{ width: 200,marginRight:'15px' }} >
                      {
                        this.state.reportTypeList.map((item,i)=> {
                          return(
                            <Select.Option value={item.value} key={i}>{item.name}</Select.Option>
                          )
                        })
                      }
                    </Select>:''
                  }                             
                  {
                    //内部跳转和H5跳转所需的搜索选择框
                    (this.state.redirectTypeListNum == 1 || this.state.redirectTypeListNum == 2) ?
                    <div style={{marginBottom:'10px',display:"inline-block"}}>
                      <Search
                        style={{ width: 200,marginRight:'15px' }} 
                        placeholder="请输入关键字"
                        enterButton="搜索"
                        onSearch={this.searchSelect.bind(this)}
                      />
                      <Select placeholder="请选择报告类型" value={this.state.chooseSearch} onSelect={this.chooseSearchSelect.bind(this)}   style={{ width: 200,marginRight:'15px' }} >
                        {
                          this.state.searchList.map((item,i)=> {
                            return(
                              <Select.Option value={item.id} key={i}>{item.title}</Select.Option>
                            )
                          })
                        }
                      </Select>
                    </div>:''
                   
                  }                 
                  {
                    //超链接独有的输入框
                    this.state.redirectTypeListNum == 3?
                      <Input placeholder="请输入内容" value={this.state.url} onChange={this.ulrChange.bind(this)}  size="default" style={{ width: '200px' }} />
                    :''
                  }
                </FormItem>
                <FormItem label="推送方式" {...formItemLayout}>
                  {
                    getFieldDecorator('sendType', {
                    rules: [{
                        required: true,message:"请选择推送方式"
                      }],
                    })(
                      <RadioGroup onChange={this.chooseSendType.bind(this)}>
                          <Radio value={1} key={1}>运营测试</Radio>
                          <Radio value={2} key={2}>正式推送</Radio>
                      </RadioGroup>
                    )
                  }
                  {
                    this.state.sendType == 1?
                      <div>
                        <Input placeholder="请输入关键字" value={this.state.accountId} onChange={this.accountIdChange.bind(this)} size="default" style={{ width: '200px' }} />
                      </div>                      
                    :''
                  }
                </FormItem>
              </Form>
            </div>
          </Modal>
        )
    }
}